import React, { Component } from "react";
import { connect } from "dva";
import { Checkbox } from "antd";
import styles from "./index.less";

const WEEK = [
  { value: "2", label: "周一" },
  { value: "3", label: "周二" },
  { value: "4", label: "周三" },
  { value: "5", label: "周四" },
  { value: "6", label: "周五" },
  { value: "7", label: "周六" },
  { value: "1", label: "周日" },
];

@connect(({ weekdaysManagement: { workingDayList } }) => ({
  workingDayList,
}))
class StepOne extends Component {

  onCheck = (checkedValues) => {
    const temp = [];
    checkedValues.forEach((item) => {
      temp.push({
        code: item,
        name: WEEK.filter((i) => i.value === item)[0].label,
      });
    });
    const { dispatch } = this.props;
    dispatch({
      type: "weekdaysManagement/set/WorkingDayList",
      payload: temp,
    });
  };

  render() {
    const { workingDayList = [] } = this.props;
    return (
      <div className={styles.root}>
        <div className={styles.title}>请选择工作日:</div>
        <Checkbox.Group style={{ width: "100%" }} onChange={this.handleChange}>
          <div className={styles.checkbox}>
            <Checkbox.Group
              options={WEEK}
              value={workingDayList.map((item) => item.code)}
              onChange={this.onCheck}
            />
          </div>
        </Checkbox.Group>
      </div>
    );
  }
}

export default StepOne;
